<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hospital Schedule</title>
</head>
<body>
    <h1>Hospital Schedule Management</h1>
    <h2>Add Doctor</h2>
    <form id="add-doctor-form">
        <input type="text" name="name" placeholder="Name" required>
        <input type="text" name="skills" placeholder="Skills (comma-separated)" required>
        <button type="submit">Add Doctor</button>
    </form>
    <h2>Doctors</h2>
    < document.getElementById('add-doctor-form').addEventListener('submit', function(e) {
            e.preventDefault();
            fetch('/doctors', {
                method: 'POST',
                body: new FormData(this)
            }).then(response => response.json()).then(data => {
                if (data.status === 'Doctor added') {
                    loadDoctors();
                }
            });
        });

        function loadDoctors() {
            fetch('/doctors').then(response => response.json()).then(data => {
                const list = document.getElementById('doctors-list');
                list.innerHTML = '';
                data.forEach(doctor => {
                    const li = document.createElement('li');
                    li.textContent = `${doctor[1]} (Skills: ${doctor[2]})`;
                    list.appendChild(li);
                });
            });
        }

        loadDoctors();
    </script>
</body>
</html>ul id="doctors-list"></ul>
    <script>